<template>
    <view class="videi-container">
        <!-- <view class="swiper">
            <u-swiper :list="list3" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="10"
                bgColor="#ffffff" height="150"></u-swiper>
        </view> -->
        <view class="videoView">
            <video class="video" :src="videoSrc" autoplay=true></video>
        </view>
        <view class="search">
            <u-search shape="round" placeholder="筛选" :animation="true" action-text="查找" @search="showSearchInfo"></u-search>
        </view>
        <view class="list">
            <u-list @scrolltolower="scrolltolower">
                <u-list-item v-for="(item, index) in indexList" :key="index">
                    <u-cell :title="`老人姓名-${index + 1}`" :label="`联系电话:18000000000`" value="查看" isLink size="large"
                        @click="changeVideo(`${index + 1}`)">
                        <u-avatar slot="icon" shape="square" size="35" :src="item.url"
                            customStyle="margin: -3px 5px -3px 0"></u-avatar>
                    </u-cell>
                </u-list-item>
            </u-list>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list3: [
                'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                'https://cdn.uviewui.com/uview/swiper/swiper1.png',
            ],
            indexList: [],
            urls: [
                'https://cdn.uviewui.com/uview/album/1.jpg',
                'https://cdn.uviewui.com/uview/album/2.jpg',
                'https://cdn.uviewui.com/uview/album/3.jpg',
                'https://cdn.uviewui.com/uview/album/4.jpg',
                'https://cdn.uviewui.com/uview/album/5.jpg',
                'https://cdn.uviewui.com/uview/album/6.jpg',
                'https://cdn.uviewui.com/uview/album/7.jpg',
                'https://cdn.uviewui.com/uview/album/8.jpg',
                'https://cdn.uviewui.com/uview/album/9.jpg',
                'https://cdn.uviewui.com/uview/album/10.jpg',
            ],
            videoSrc: '/static/video/1.mp4'
        }
    },
    methods: {
        onLoad() {
            this.loadmore()
        },
        showSearchInfo(value) {
            console.log("搜索栏被点击" + value);
        },
        changeVideo(index) {
            if (index % 2 == 0) {
                this.videoSrc = '/static/video/2.mp4'
            } else {
                this.videoSrc = '/static/video/1.mp4'
            }
        },
        scrolltolower() {
            this.loadmore()
        },
        loadmore() {
            for (let i = 0; i < 30; i++) {
                this.indexList.push({
                    url: this.urls[uni.$u.random(0, this.urls.length - 1)]
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped >
page {
    background-color: #fff;
}
.videi-container {
  max-height: 100vh; /* 视口高度 */
  overflow: hidden; /* 隐藏超出部分 */
}

.videoView {
    padding: 4% 0%;
    // background-color: red;
    border-radius: 5%;

    // overflow: hidden;
    .video {
        width: 100%;
    }
}

.search {
    padding: 3% 3%;
}

.list {
    padding: 0 1%;
    overflow: hidden;
}
</style>